<template>
  <div class="container">
    <!--数据统计-->
    <div class="top">
      <el-button type="primary" round style="width: 68px;height: 32px;margin-right: 10px">全国</el-button>
      <el-button v-for="(item,index) in btnStr" :key="'bloc'+index" round style="width: 96px;height: 32px;margin-right: 10px">
        {{ item }}
      </el-button>
      <div class="top-cont">
        <p><span class="title">销售总监</span><span>姓名</span></p>
        <p><span class="title">销售经理</span><span>姓名</span></p>
        <p><span class="title">销售专员</span><span>姓名</span></p>
      </div>
    </div>
    <div class="center">
      <div>
        请选择统计时间段：
      </div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <img src="" alt="" />
          <div>
            <p>{{ item.name }}</p>
            <p>{{ item.num }}</p>
          </div>
        </li>
      </ul>
      <!-- 数据总览 -->
      <data-overview />
      <div class="data-box">
        <!-- 诊所数据 -->
        <div class="item"><clinic-data /></div>
        <!-- 患者数据 -->
        <div class="item"><patient-data /></div>
        <!-- 医生数据 -->
        <div class="item"><doctor-data /></div>
        <!-- 确认制作 -->
        <div class="item"><confirm /></div>
        <!-- 套餐数据 -->
        <div class="item"><package-data /></div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderAccPage } from '@/api/oper';
import DataOverview from './components/dataOverview';
import ClinicData from './components/clinicData';
import PatientData from './components/patientData';
import DoctorData from './components/doctorData';
import Confirm from './components/confirm';
import PackageData from './components/packageData';

export default {
  components: {
    DataOverview,
    ClinicData,
    PatientData,
    DoctorData,
    Confirm,
    PackageData
  },
  data() {
    return {
      btnStr: ['华北区', '华西区', '华东区', '华南广州', '华南深圳', '华中区', '东北区'],
      tableData: [],
      list: [
        {
          img: '',
          name: '诊所数据',
          num: 20
        },
        {
          img: '',
          name: '诊所数据',
          num: 20
        },
        {
          img: '',
          name: '诊所数据',
          num: 20
        },
        {
          img: '',
          name: '诊所数据',
          num: 20
        }
      ]
    };
  },
  created() {
    orderAccPage().then(res => {
      this.tableData = res.content;
    });
  },
  methods: {

  }
};
</script>

<style scoped>
    .top {
        padding: 20px 30px 30px;
        border-radius: 20px;
        background: #fff;
    }
    .top-cont {
        margin-top: 32px;
        padding: 20px 20px;
        height: 137px;
        border-radius: 10px;
        background: #F8F8FA;
    }
    .top-cont p {
        line-height: 20px;
        margin: 0 0 20px;
    }
    .top-cont p span {
        margin-right: 30px;
        font-size: 14px;
        color: #666;
    }
    .top-cont p span:first-child {
        color: #333;
    }
    .center {
        padding: 20px 30px 30px;
        margin-top: 24px;
        border-radius: 20px;
        background: #fff;
    }

    .center ul {
        list-style: none;
        display: flex;
        align-items: center;
        margin: 32px 0;
        padding: 0;
    }

    .center ul li {
        width: 280px;
        padding: 24px 30px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        border: 1px solid #E4E4E4;
        margin-right: 20px;
    }

    .center ul li:last-child {
        margin: 0;
    }

    .center ul li img {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .data-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
    }
    .data-box .item {
        width: 49%;
        flex-shrink: 1;
        margin-top: 20px;
    }
</style>
